<template>
  <div class="submit-booking head-line">
    <div class="card-shadow">
      <navigator url="/pages/editAddr/main" class="addr-box flex-box weui-cell weui-cell_access">
        <div class="flex-1">
          <div class="flex-box align-start">
            <div class="name-box">
              <p class="name ellipsis">{{addressData.name}}</p>
              <p class="flag" v-if="addressData.default">默认</p>
            </div>
            <div class="flex-1">
              <div class="tel">{{addressData.tel}}</div>
              <div class="addr">{{addressData.address}}</div>
            </div>
          </div>
        </div>
        <div class="weui-cell__ft_in-access"></div>
      </navigator>
    </div>
    <div class="card-shadow">
      <view class="weui-cell weui-cell_select">
        <view class="weui-cell__hd">
          <view class="weui-label">选择服务价格</view>
        </view>
        <view class="weui-cell__bd">
          <picker @change="bindPriceChange" :value="priceIndex" :range="priceArr">
            <view class="weui-select text-right">{{priceArr[priceIndex]}}</view>
          </picker>
        </view>
      </view>
    </div>
    <div class="card-shadow">
      <view class="weui-cell weui-cell_select" @tap="hardSelectTime">
        <view class="weui-cell__hd">
          <view class="weui-label">选择服务时长</view>
        </view>
        <view class="weui-cell__bd">
          <view class="weui-select text-right">{{serviceTime}}/小时</view>
        </view>
      </view>
    </div>
    <PopLayer :data="serviceTimeData" :hidden="selectTimeHidden" @hidden="hiddenSelectTime" @change="selectTimeChange" />
    <div class="card-shadow">
      <navigator url="/pages/selectDate/main" class="weui-cell weui-cell_select">
        <view class="weui-cell__hd">
          <view class="weui-label">选择服务时间</view>
        </view>
        <view class="weui-cell__bd">
          <view class="weui-select text-right">2018-08</view>
        </view>
      </navigator>
    </div>
    <div class="btn-full-box">
      <button class="btn-full" form-type="submit">立即预定</button>
    </div>
  </div>
</template>
<script>
import PopLayer from '@/components/PopLayer/index'
export default {
  components: { PopLayer },
  data () {
    return {
      addressData: {
        name: '周先生',
        tel: '13353646474',
        address: 'd大萨达撒客户端卡实打实的地撒大家阿萨斯柯达',
        default: true
      },
      priceArr: ['40元/小时', '80元/小时'],
      priceIndex: 0,
      selectTimeHidden: true,
      serviceTimeData: {
        title: '请选择服务时长',
        selectIndex: 0,
        moneyList: [
          { time: '2', money: '40' },
          { time: '2.5', money: '60' },
          { time: '3', money: '80' },
          { time: '3.5', money: '100' },
          { time: '4', money: '120' },
          { time: '4.5', money: '140' }
        ]
      }
    }
  },
  computed: {
    serviceTime () {
      return this.serviceTimeData.moneyList[this.serviceTimeData.selectIndex].time
    }
  },
  methods: {
    bindPriceChange (e) {
      this.priceIndex = Number(e.mp.detail.value)
    },
    hardSelectTime () {
      this.selectTimeHidden = false
    },
    hiddenSelectTime () {
      this.selectTimeHidden = true
    },
    selectTimeChange (index) {
      this.serviceTimeData.sxelectIndex = index
    }
  }
}
</script>
<style lang="less">
page{
  background-color: #f9f9f9;
}
.submit-booking {
  .card-shadow {
    margin-bottom: 15px;
  }
  .addr-box {
    background-color: #fefcf3;
    padding: 21px 14px;
    .align-start {
      align-items: flex-start;
    }
    .name-box {
      min-width: 60px;
      .name {
        font-size: 15px;
        color: #000;
      }
      .flag {
        display: inline-block;
        color: rgb(250, 75, 112);
        font-size: 12px;
        line-height: 1;
        padding: 3px 5px;
        border-radius: 4px;
        border: 1rpx solid;
        margin-top: 15px;
      }
    }
    .tel {
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
      font-weight: 500;
    }
    .addr {
      font-size: 14px;
      line-height: 21px;
      color: #888;
      width: 210px;
    }
  }
  .weui-cell_select{
    padding: 7px 0;
    .weui-cell__hd{
      font-size: 15px;
      padding-left: 15px;
    }
    .weui-select{
      font-size: 14px;
      color: #888;
    }
  }
  .btn-full-box{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>